<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地注册</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
<model1></model1>
<model2></model2>


</div>

<script>
    //定义了一个组件的对象
    let model1 = {
        // 换行自动拼接字串
        template:"<div><h1>{{title}}</h1>" +
            "<button @click='alert'>点我</button></div>",
        data: function (){
            return{
                tatle:"本地注册的组件"
            };
        },
        methods:{
            alert:function () {
                alert("本地注册的组件")
            }
        },
    }

    let model2 = {template: "<h2>MODEL2的内容</h2>"}

  new Vue({
     el:"#app",
     data:{},
      // 本地注册的组件，只能在当前vue绑定的元素上使用
      components:{
         // model1:model1
          //当属性名和对象名称一致事 可以省略
          model1,model2
         //声明组件名称:model1
         // model1:{
         //                 // 换行自动拼接字串
         //      template:"<div><h1>{{title}}</h1>" +
         //          "<button @click='alert'>点我</button></div>",
         //     data: function (){
         //          return{
         //            tatle:"本地注册的组件"
         //          };
         //     },
         //     methods:{
         //         alert:function () {
         //             alert("本地注册的组件")
         //         }
         //     },
         // }
      }
  });
</script>
</body>
</html>